<template>
  <div class="zx-page">
    <homeview></homeview>
    
    <!-- 内容占位（可替换为实际页面内容） -->
    <main class="zx-main">
      <h2>学校简介</h2>
      <h1 style="font-size: 21px;color: #333;">知进教育专注IT职业教育，以“培养高端技术人才，助力职场跃迁”为使命</h1>
      <h3 style="font-size: 21px;color: #333;">致力于创新职业教育，提倡务实、创新、稳健、和谐的核心价值观。秉承以专业打造卓越，品质铸就价值为工作标准。</h3>
      <h4 style="font-size: 21px;color: #333;">知进教育以高品质就业为目标，通过专家治校，严格管理定位于高端互联网人才技能培养加学历教育。</h4>
      <h5 style="font-size: 21px;color: #333;">教学过程中，通过激励教学，成就驱动的教学方式不断提升和挖掘学员的实战能力和自我潜力的激发。</h5>
      <h6 style="font-size: 21px;color: #333;">知进教育始终以服务发展为宗旨，通过三大目标为指导，以三大体系为保障，已经为社会培养了大批领先的、高素质的高级应用型专业技术人才。</h6>

    </main>
    <home_bottom></home_bottom>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Homeview from './Homeview.vue';
import home_bottom from '@/components/home_bottom.vue'
</script>

<style scoped>
/* 全局布局 - 隐藏滚动条 */
html,
body,
.zx-page {
  width: 100%;
  height: 100%;
  overflow: hidden;

}

/* 页面容器 */
.zx-page {
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #5697E8;
}

/* 头部导航 */
.zx-header {
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
}

.zx-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  height: 70px;
}

.zx-logo img {
  height: 80px;
  height: 100px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* 导航菜单 */
.zx-nav ul {
  display: flex;
  gap: 45px;

  border: 5px;
}

.zx-nav li {
  list-style: none;
  color: #333;
  font-size: 19px;
  cursor: pointer;
  padding-bottom: 4px;
  transition: color 0.3s;
  border: 8px;
}

.zx-nav li.active {
  color: #0096ff;
  border-bottom: 2px solid #0096ff;
}

.zx-nav li:hover {
  color: #0096ff;
}

/* 咨询热线 */
.zx-hotline {
  color: #000;
  font-size: 21px;
  align-items: center;
  margin-left: 40px;
  display: flex;
}

/* 轮播图（左移效果） */
.zx-banner {
  width: 100%;
  background-color: #f9f9f9;
  /* 关键：让轮播图容器左移，按需调整负值 */
  margin-left: -20px;
}

.zx-banner-inner {
  width: calc(100% + 40px);
  /* 抵消左移，让轮播图铺满 */
  max-width: 1600px;
  /* 限制最大宽度，避免拉伸 */
  margin: 0 auto;
  overflow: hidden;
}

.zx-banner-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* 内容区域 */
.zx-main {
  width: 90%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

.zx-main h2 {
  font-size: 38px;
  color: #000;
  margin-bottom: 16px;
}



/* 响应式适配 */
@media (max-width: 768px) {
  .zx-banner {
    margin-left: 0;
  }

  .zx-banner-inner {
    width: 100%;
  }

  .zx-nav ul {
    gap: 20px;
  }
}
</style>